<template>
  <div class="site-wrapper site-page--login">
    <div class="site-content__wrapper">
      <div class="site-content">
        <div class="title_warp">
          <div class="img_warp"><img src="../../assets/img/logo.png" /></div>
          <div class="brand-info">
            <!-- <h3 class="brand-info__text">土石方清运管理系统</h3> -->
            <div class="login_title">
              <img src="../../assets/img/login_title.png" />
            </div>
            <div class="text_title">
              <img src="../../assets/img/login_title2.png" />
            </div>
          </div>
        </div>

        <div class="login_div">
          <div class="title">
            登 录 系 统
          </div>
          <el-form
            class="form_div"
            :model="dataForm"
            :rules="dataRule"
            ref="dataForm"
            @keyup.enter.native="dataFormSubmit()"
            status-icon
          >
            <el-form-item prop="userName">
              <div class="input-box">
                <div class="input-icon">
                  <img
                    style="width: 100%;height: 100%;"
                    src="../../assets/img/user.png"
                  />
                </div>
                <el-input
                  v-model="dataForm.userName"
                  placeholder="请输入用户名称"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <div class="input-box">
                <div class="input-icon">
                  <img
                    style="width: 100%;height: 100%;"
                    src="../../assets/img/pass.png"
                  />
                </div>
                <el-input
                  v-model="dataForm.password"
                  type="password"
                  placeholder="请输入登录密码"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="15">
                  <div class="input-box">
                    <div class="input-icon">
                      <img
                        style="width: 100%;height: 100%;"
                        src="../../assets/img/num.png"
                      />
                    </div>
                    <el-input
                      v-model="dataForm.captcha"
                      placeholder="请输入验证码"
                    >
                    </el-input>
                  </div>
                </el-col>
                <el-col :span="9" class="login-captcha">
                  <img
                    class="captcha-img"
                    :src="captchaPath"
                    @click="getCaptcha()"
                  />
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <div
                class="login-btn-submit"
                type="primary"
                @click="dataFormSubmit()"
              >
                登 录
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUUID } from "@/utils";
import { AES_Encrypt } from "@/utils/aes.js";
export default {
  data() {
    return {
      dataForm: {
        userName: "",
        password: "",
        uuid: "",
        captcha: ""
      },
      dataRule: {
        userName: [
          { required: true, message: "帐号不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
        captcha: [
          { required: true, message: "验证码不能为空", trigger: "blur" }
        ]
      },
      captchaPath: ""
    };
  },
  created() {
    this.getCaptcha();
  },
  methods: {
    // 提交表单
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl("/sys/login"),
            method: "post",
            data: this.$http.adornData({
              username: this.dataForm.userName,
              password: this.dataForm.password,
              uuid: this.dataForm.uuid,
              captcha: this.dataForm.captcha
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$cookie.set("token", data.token);
              this.$router.replace({ name: "home" });
              let thingsKitToken = {
                token: data.requestToken,
                refreshToken: data.refreshToken
              };
              localStorage.setItem(
                "AUTH_TOKEN",
                AES_Encrypt(JSON.stringify(thingsKitToken))
              );
            } else {
              this.getCaptcha();
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 获取验证码
    getCaptcha() {
      this.dataForm.uuid = getUUID();
      this.captchaPath = this.$http.adornUrl(
        `/captcha.jpg?uuid=${this.dataForm.uuid}`
      );
    }
  }
};
</script>

<style lang="scss">
.site-wrapper.site-page--login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  // background-color: rgba(38, 50, 56, 0.6);
  // overflow: hidden;
  // &:before {
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  //   z-index: -1;
  //   width: 100%;
  //   height: 100%;
  //   content: "";
  //   background-image: url(~@/assets/img/login.jpg);
  //   background-size: cover;
  background: url(~@/assets/img/login2.png) center center no-repeat;
  background-size: 100% 100%;
  // }
  .site-content__wrapper {
    // position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent;
  }
  .site-content {
    min-height: 100%;
    padding: 0px !important;
    .title_warp {
      display: flex;
      margin-top: 100px;
      justify-content: center;
      text-align: center;
      margin-bottom: 90px;
      .img_warp {
        width: 186px;
        height: 77px;
        display: inline-block;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .login_div {
      width: 550px;
      height: 460px;
      background: url(~@/assets/img/input_bg.png) center center no-repeat;
      background-size: 100% 100%;
      margin: auto;
      padding-top: 29px;
      box-sizing: border-box;
      .title {
        font-size: 40px;
        color: #fff;
        font-weight: 500;
        text-align: center;
        margin-bottom: 27px;
      }
      .form_div {
        width: 400px;
        margin: auto;
        text-align: center;
        .el-form-item {
          margin-bottom: 22px;
        }
        .el-form-item__label {
          color: #fff !important;
          font-size: 16px;
        }
        .el-input__inner {
          padding-left: 20px;
          box-sizing: border-box;
          border: none;
          font-size: 16px;
        }
        .input-box {
          display: flex;
          align-items: center;
          border-radius: 4px;
          background-color: #fff;

          .input-icon {
            width: 20px;
            height: 20px;
            margin: 0 12px;
            font-size: 0;

            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }
        .captcha-img {
          height: 40px;
        }
      }
    }
  }
  .brand-info {
    text-align: center;
    .text_title {
      height: 50px;
      width: 706px;
      margin: auto;
      img {
        width: 100%;
        height: 100%;
        display: inline-block;
      }
    }

    .login_title {
      width: 950px;
      height: 98px;
      img {
        width: 100%;
        height: 100%;
        display: inline-block;
      }
    }
  }
  .brand-info__text {
    margin: 0 0 14px 0;
    font-size: 48px;
    font-weight: 400;
    text-transform: uppercase;
  }
  .brand-info__intro {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.58;
    opacity: 0.6;
  }
  .login-main {
    // position: absolute;
    // top: 0;
    // right: 0;
    padding: 150px 60px 180px;
    width: 470px;
    min-height: 100%;
    // background-color: #fff;
  }
  .login-title {
    font-size: 16px;
  }
  .login-captcha {
    overflow: hidden;
    > img {
      width: 100%;
      cursor: pointer;
    }
  }
  .login-btn-submit {
    margin: auto;
    background: linear-gradient(90deg, #3ce0ca 0%, #0cb49c 100%);
    width: 400px;
    height: 50px;
    border-radius: 3px 3px 3px 3px;
    color: #f8fcfa;
    font-size: 26px;
    line-height: 50px;
    font-weight: 500;
    margin-top: 30px;
    cursor: pointer;
  }
}

@media only screen and (max-width: 1366px) {
  .site-wrapper.site-page--login {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    // background-color: rgba(38, 50, 56, 0.6);
    // overflow: hidden;
    // &:before {
    //   position: fixed;
    //   top: 0;
    //   left: 0;
    //   z-index: -1;
    //   width: 100%;
    //   height: 100%;
    //   content: "";
    //   background-image: url(~@/assets/img/login.jpg);
    //   background-size: cover;
    background: url(~@/assets/img/login2.png) center center no-repeat;
    background-size: 100% 100%;
    // }
    .site-content__wrapper {
      // position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 0;
      margin: 0;
      overflow-x: hidden;
      overflow-y: auto;
      background-color: transparent;
    }
    .site-content {
      min-height: 100%;
      padding: 0px !important;
      .title_warp {
        display: flex;
        margin-top: 67px;
        justify-content: center;
        text-align: center;
        margin-bottom: 60px;
        .img_warp {
          width: 124px;
          height: 51px;
          display: inline-block;
          margin-right: 13px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .login_div {
        width: 367px;
        height: 307px;
        background: url(~@/assets/img/input_bg.png) center center no-repeat;
        background-size: 100% 100%;
        margin: auto;
        padding-top: 29px;
        box-sizing: border-box;
        .title {
          font-size: 27px;
          color: #fff;
          font-weight: 500;
          text-align: center;
          margin-bottom: 18px;
        }
        .form_div {
          width: 267px;
          margin: auto;
          text-align: center;
          .el-form-item {
            margin-bottom: 15px;
          }
          .el-form-item__label {
            color: #fff !important;
            font-size: 12px;
          }
          .el-form-item__content {
            line-height: 27px;
          }
          .el-input__inner {
            padding-left: 13px;
            box-sizing: border-box;
            height: 27px;
            line-height: 27px;
            font-size: 12px;
          }
          .input-box {
            display: flex;
            align-items: center;
            border-radius: 4px;
            background-color: #fff;

            .input-icon {
              width: 13px;
              height: 13px;
              margin: 0 8px;
              font-size: 0;

              img {
                display: block;
                width: 100%;
                height: 100%;
              }
            }
          }
          .captcha-img {
            height: 27px;
          }
        }
      }
    }
    .brand-info {
      text-align: center;
      .text_title {
        height: 33px;
        width: 471px;
        margin: auto;
        img {
          width: 100%;
          height: 100%;
          display: inline-block;
        }
      }

      .login_title {
        width: 633px;
        height: 65px;
        img {
          width: 100%;
          height: 100%;
          display: inline-block;
        }
      }
    }
    .brand-info__text {
      margin: 0 0 14px 0;
      font-size: 48px;
      font-weight: 400;
      text-transform: uppercase;
    }
    .brand-info__intro {
      margin: 10px 0;
      font-size: 16px;
      line-height: 1.58;
      opacity: 0.6;
    }
    .login-main {
      // position: absolute;
      // top: 0;
      // right: 0;
      padding: 150px 60px 180px;
      width: 470px;
      min-height: 100%;
      // background-color: #fff;
    }
    .login-title {
      font-size: 16px;
    }
    .login-captcha {
      overflow: hidden;
      > img {
        width: 100%;
        cursor: pointer;
      }
    }
    .login-btn-submit {
      margin: auto;
      background: linear-gradient(90deg, #3ce0ca 0%, #0cb49c 100%);
      width: 267px;
      height: 33px;
      border-radius: 3px 3px 3px 3px;
      color: #f8fcfa;
      font-size: 17px;
      line-height: 33px;
      font-weight: 500;
      margin-top: 20px;
    }
  }
}
</style>
